<template>
  <swiper :options="swiperOption" ref="mySwiper">
    <swiper-slide
      v-for="(item,index) in data"
      class="item"
      :key="index"
      @click.prevent="selectItem(item)"
    >
      <div class="imgcover" v-lazy:background-image="item.picUrl + '?param=100y100'">
        <p class="desc">
          <i class="iconfont iconyousanjiao"></i>
          <span>{{item.playCount | playNumFormat}}</span>
        </p>
        <div class="cpwrite">{{item.copywriter}}</div>
      </div>
      <div class="text">
        <h2 class="name">{{item.name}}</h2>
      </div>
    </swiper-slide>

    <div class="swiper-pagination" slot="pagination"></div>
    <!-- <div class="swiper-rightmore" v-show="data.length">
      <i class="iconfont icongetmorel"></i>
      <span>右滑获取更多</span>
    </div>-->
  </swiper>
</template>

<script>
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import { mapMutations } from "vuex";
import { getDjDetail } from "@/request/api";
import "swiper/css/swiper.css";
let vm = null;
export default {
  props: {
    data: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      pulling: false, //是否正在下拉中
      pullDownText: "向下拉动会重新加载幻灯片哦",
      pullUpText: "向上拉动会加载更多哦",
      touchOver: false,
      width: 0,

      swiperOption: {
        autoplay: false,
        direction: "horizontal",
        slidesPerView: "auto",
        centeredSlides: false,
        observer: true,
        observeParents: true,
        freeMode: true,
        notNextTick: true,
        mousewheel: false,
        setWrapperSize: true,
        on: {
          touchEnd() {
            vm.touchEnd();
          },
          sliderMove() {
            vm.sliderMove();
          },
          tap(event) {
            const { clickedIndex } = this;
            vm.handleClickSlide(clickedIndex);
          }
        }
      }
    };
  },
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  created() {
    vm = this;
  },
  methods: {
    ...mapMutations({
      setSonngSheet: "SET_SONGSHEET",
      setSongSheetType: "SET_SONGSHEET_TYPE"
    }),
    // selectItem(item) {
    //   console.log(item);
    // },
    handleClickSlide(i) {
      // 获取电台详情：
      // getDjDetail(this.data[i].id).then(res => {
      //   console.log(res);
      // });
      // console.log(this.data[i].id);
      this.$router.push({
        name: "MvDetail",
        query: { id: this.data[i].id }
      });
      this.$toast("Mv页面还在搭建中,部分功能未完善~~");
    },
    touchEnd() {
      console.log("a");
      console.log(this.swiper.getTranslate());
    },
    sliderMove() {
      // console.log(this.swiper.getTranslate());
    }
  },
  mounted() {}
};
</script>

<style scoped lang="less">
.djlist {
  padding-bottom: 20px;
}
.recommend-list {
  .item {
    width: 2.8rem;
    flex: 0 0 2.8rem;
    position: relative;
    margin-right: 0.28rem;
    &:last-child {
      margin-right: 0;
    }
    .imgcover {
      width: 100%;
      height: 2.8rem;
      .bz(contain);
      border-radius: 0.2rem;
      position: relative;
      .cpwrite {
        position: absolute;
        padding: 5px;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 12px;
        color: #f9f9f9;
        background-color: rgba(23, 23, 23, 0.3);
        .sl;
      }
      .desc {
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 12px;
        .flex-row-nowrap(center);
        span {
          margin-left: 5px;
        }
      }
    }
    .text {
      display: flex;
      flex-direction: column;
      justify-content: center;
      flex: 1;
      line-height: 20px;
      overflow: hidden;
      font-size: @font-size-medium;
      .name {
        margin-top: 8px;
        color: @color-text;
        font-size: 14px;
        line-height: 20px;
        height: 40px;
        overflow: hidden;
      }
      .desc {
        color: rgba(255, 255, 255, 0.3);
        font-size: 12px;
      }
    }
  }
}
.swiper-rightmore {
  height: 2.8rem;
  width: 50px;
  background-color: #2f2f2f;
  font-size: 14px;
  padding: 0 20px;
  color: #fff;
  border-radius: 0.2rem;
  .flex-column-mid;
  i {
    font-size: 12px;
  }
  span {
    font-size: 12px;
    margin-top: 5px;
  }
}
</style>